---
import Layout from '../components/Layout.astro';
---
<Layout>
	<div id="one" transition:name="front-end">front-end</div>
	<div id="two" transition:name="开源">开源</div>
	<div id="three" transition:name="开a源">开a源</div>
	<div id="four" transition:name="c开a源c">c开a源c</div>
	<div id="five" transition:name="オープンソース">オープンソース</div>
	<div id="six" transition:name="开$源">开$源</div>
	<div id="seven" transition:name="开.源">开.源</div>
	<div id="eight" transition:name="🐎👱❤">🐎👱❤</div>
	<div id="nine" transition:name="--9">--9</div>
	<div id="ten" transition:name="10">10</div>
	<div id="eleven" transition:name="-11">-11</div>
	<div id="twelve" transition:name="#! /">#!	 /</div>
	<div id="thirteen" transition:name="_01__02___">_01__02___</div>
	<div id="batch0" transition:name="\x00\x01\x02\x03\x04\x05\x06\x07\x08\x09\x0a\x0b\x0c\x0d\x0e\x0f\x10\x11\x12\x13\x14\x15\x16\x17\x18\x19\x1a\x1b\x1c\x1d\x1e\x1f">control chars</div>
	<div id="batch1" transition:name="\x20\x21\x22\x23\x24\x25\x26\x27\x28\x29\x2a\x2b\x2c\x2d\x2e\x2f\x30\x31\x32\x33\x34\x35\x36\x37\x38\x39\x3a\x3b\x3c\x3d\x3e\x3f">punctuation &amp; numbers</div>
	<div id="batch2" transition:name="\x40\x41\x42\x43\x44\x45\x46\x47\x48\x49\x4a\x4b\x4c\x4d\x4e\x4f\x50\x51\x52\x53\x54\x55\x56\x57\x58\x59\x5a\x5b\x5c\x5d\x5e\x5f">upper case chars</div>
	<div id="batch3" transition:name="\x60\x61\x62\x63\x64\x65\x66\x67\x68\x69\x6a\x6b\x6c\x6d\x6e\x6f\x70\x71\x72\x73\x74\x75\x76\x77\x78\x79\x7a\x7b\x7c\x7d\x7e\x7f">lower case chars</div>
	<div id="batch4" transition:name="\x80\x81\x82\x83\x84\x85\x86\x87\x88\x89\x8a\x8b\x8c\x8d\x8e\x8f\x90\x91\x92\x93\x94\x95\x96\x97\x98\x99\x9a\x9b\x9c\x9d\x9e\x9f">80-9f</div>
	<div id="batch5" transition:name="\xa0\xa1\xa2\xa3\xa4\xa5\xa6\xa7\xa8\xa9\xaa\xab\xac\xad\xae\xaf\xb0\xb1\xb2\xb3\xb4\xb5\xb6\xb7\xb8\xb9\xba\xbb\xbc\xbd\xbe\xbf">a0-bf</div>
	<div id="batch6" transition:name="\xc0\xc1\xc2\xc3\xc4\xc5\xc6\xc7\xc8\xc9\xca\xcb\xcc\xcd\xce\xcf\xd0\xd1\xd2\xd3\xd4\xd5\xd6\xd7\xd8\xd9\xda\xdb\xdc\xdd\xde\xdf">c0-df</div>
	<div id="batch7" transition:name="\xe0\xe1\xe2\xe3\xe4\xe5\xe6\xe7\xe8\xe9\xea\xeb\xec\xed\xee\xef\xf0\xf1\xf2\xf3\xf4\xf5\xf6\xf7\xf8\xf9\xfa\xfb\xfc\xfd\xfe\xff">e0-ff</div>
	<a id="navigate" href="">navigate</a>
</Layout>
<script>
	document.addEventListener('animationstart', start);
	function start(event:Event) {
		if (event instanceof AnimationEvent) {
			const name = event.animationName;
			const match = name.match(/^-ua-view-transition-group-anim-(.*)$/)
			if (match) console.log("anim:",match[1]);
		}
	}
</script>
